<meta title="文章管理" />
<div class="p">
    <div class="m-b clearfix">
        <form class="form-inline pull-left" id="form">
            <input autocomplete="off" type="text" class="form-control input-sm" placeholder="输入关键字" style="width:200px;" name="keywords" />
            <input autocomplete="off" type="hidden" name="page" id="page" value="1"/>
            <select class="form-control input-sm" s="select" name="sort">
                <option value="">排序</option>
                <option value="SHARE_TIMES_DESC">分享次数降序</option>
                <option value="ID_DESC">ID降序</option>
            </select>
            <button type="button" class="btn btn-default btn-sm" s-click="$page.node.val(1); $articlesGrid.refresh()">查询</button>
        </form>
        <div class="pull-right">
            <div class="btn-group">
                <a href="javascript:;" class="btn btn-primary btn-sm btn-outline"
                   s-click="add()">
                    <i class="fa fa-plus"></i> 新增
                </a>
            </div>
        </div>
    </div>
    <div id="articlesGrid"
         s='datac,nda,check'
         s-data="S.get('/api/article/search', $form.node.serialize())">
        <table class="table table-striped table-bordered table-hover table-middle">
            <tr>
                <th>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="checkall-h"/>
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </th>
                <th>内容</th>
                <th>图片</th>
                <th>分享次数</th>
                <th>创建时间</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop" s-data-filter="'results'">
            <tr s-loop-role="empty">
                <td colspan="6">暂无数据</td>
            </tr>
            <tr s-loop-role="row" s-check-role="i" s="datac" class="article">
                <td>
                    <label class="s-checkbox">
                        <input autocomplete="off" type="checkbox" s-check-role="h" />
                        <span class="s-checkbox-indicator"></span>
                    </label>
                </td>
                <td style="max-width: 300px;" name="content"></td>
                <td s="tpl">
                    {%$.each(this.picList, function() {%}
                    <a href="{%=this%}" external target="_blank"><img src="{%=this%}" style="max-width: 100px; max-height: 100px;" /></a>
                    {%})%}
                </td>
                <td name="shareTimes"></td>
                <td name="createTime"></td>
                <td class="text-right">
                    <input autocomplete="off" type="button" class="btn btn-primary btn-outline btn-xs" s-click="edit(this)" value="编辑" />
                    <input autocomplete="off" type="button" class="btn btn-danger btn-outline btn-xs" s-click="del(this)" value="删除" />
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="6" class="text-right">
                    <ul s="pagination"
                        s-pagination="{action:function(){$page.node.val(this); $articlesGrid.refresh()}}"
                        class="pagination pagination-sm">
                    </ul>
                    共有<span name="total"></span>个数据
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<script type="text/javascript">

    function del($this) {
        var data = $this.parent().data()
        S.confirm("确定操作吗？").done(function() {
            S.remove("/api/article/" + data.id).done(function() {
                $articlesGrid.refresh();
            })
        })
    }

    function add() {
        S.popupOpen("/article/article-add.html").done(function(rs) {
            rs && $articlesGrid.refresh();
        })
    }

    function edit($this) {
        var data = $this.parent().data()
        S.popupOpen("/article/article-edit.html", {article: data}).done(function(rs) {
            rs && $articlesGrid.refresh();
        })
    }

</script>